<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>编辑商品</title>
  <link href="../../static/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="../../static/vendor/bootstrap-icons/bootstrap-icons.min.css" rel="stylesheet">
  <link href="../../static/css/vui365.min.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    <loading-panel :is-loading="isLoading"></loading-panel>
    <form class="form-main form-horizontal" style="height:100vh" method="POST" ref="editForm">
      <div class="form-body container-fluid p-3"
        style="height:calc(100% - 45px); overflow-y: auto; overflow-x: hidden;">
        <div class="row skeleton">
          <label class="col-sm-2 col-form-label">属性</label>
          <div class="col-sm-9">
            <div class="input-group input-group-sm">
              <select class="form-select form-select-sm" ref="elSelect">
                <option :value="item.value" v-for="(item, idx) of dataOfAttributes" :key="idx">{{item.text}}</option>
              </select>
              <button class="btn btn-sm btn-secondary" @click.prevent="onAddItem(0)">添加</button>
            </div>
            <table class="table table-sm">
              <thead>
                <tr>
                  <th>属性</th>
                  <th>值</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,idx) of valuesData" :key="idx">
                  <td>{{item.text}}</td>
                  <td><input class="form-control form-control-sm" type="search" /></td>
                  <td>
                    <button class="btn btn-sm btn-secondary" @click.prevent="onAddItem(idx)">添加</button>
                    <button class="btn btn-sm btn-danger" @click.prevent="onRemoveItem(idx)">删除</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <!-- /.form-body -->
      </div>
      <div class="form-footer border-top pt-2 w-100 text-end">
        <button type="button" class="btn btn-secondary" @click.prevent="onCancelHandle()">取消</button>
        <cd-button class="btn btn-primary mx-2" @click="onSubmitHandle()">保存</cd-button>
    </form>
  </div>

  <script src="../../static/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="../../static/vendor/vue/vue.global.prod.min.js"></script>
  <script>
    // 全局配置
    this.vui365 = this.parent.vui365;

    // API接口配置
    const UrlCfg = {
      show: '/api/admin/ec-goods/{id}', // GET
      store: '/api/admin/ec-goods', // POST
      update: '/api/admin/ec-goods/{id}', // PUT
      attrList: '/api/admin/ec-attribute?_mode=dict&category_id={cid}',
    }
    /**
     * 管理员组件
     * @description 管理员组件
     */
    const App = {
      // data 配置
      data() {
        return {
          id: 0,
          dataOfMain: {
            data: {},
            status_data: []
          },
          dataOfAttributes: [
            { text: '标签1', value: 'v1' },
            { text: '标签2', value: 'v2' },
            { text: '标签3', value: 'v3' },
          ],
          valuesData: [],
          isLoading: true,
        };
      },
      // methods 配置
      methods: {
        // 初始化页面数据
        async initData() {
          this.isLoading = true;
          const msgInfo = await vui365.stdAxios(UrlCfg.attrList.replace('{cid}', 0), {}, 'GET');
          this.isLoading = false;
          console.log("[刷新表格数据] msgInfo=", msgInfo);
          if (msgInfo.status == 0) {
            vui365.BsDialog.alert(msgInfo.message);
            return;
          }
          this.dataOfAttributes = msgInfo.data;
        },
        // 初始化页面视图
        initView() {
          // 移除骨架屏
          document.querySelectorAll('.skeleton').forEach(el => {
            el.classList.remove("skeleton");
          })
        },
        onAddItem(idx) {
          let item = this.dataOfAttributes[this.$refs.elSelect.selectedIndex];
          this.valuesData.splice(idx, 0, { text: item.text.replaceAll('|----', ''), value: item.value });
        },
        onRemoveItem(idx) {
          this.valuesData.splice(idx, 1);
        }
      },
      // created 生命周期方法
      created() {
        this.id = vui365.EsUtils.getQueryString("id", 0, window.location.search);
        this.initData();
      },
      // mounted 生命周期方法
      mounted() {
        this.initView();
      },
    };

    // 创建应用实例
    const app = Vue.createApp(App);
    //  注册组件
    app.component("UploadInput", vui365.getComponentOfUploadInput())
    app.component("SelectInput", vui365.getComponentOfSelectInput())
    app.component("CheckboxInput", vui365.getComponentOfCheckboxInput())
    app.component("RadioInput", vui365.getComponentOfRadioInput())
    app.component("CdButton", vui365.getComponentOfCdButton())
    app.component("LoadingPanel", vui365.getComponentOfLoadingPanel())
    // 加载根元素
    app.mount('#app');
  </script>

</body>

</html>